<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1">
            <el-button class="b1" type="primary" size="mini" @click="BthgoodsWarehousing()">入库</el-button>  
            <el-button class="b2" size="mini" @click="BtnimportTheFile()">导入</el-button>  
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsName"  @keyup.enter.native="submitSerch" placeholder="请输入办公用品名称" style="width:155px" size="mini"></el-input>
        </div>
       <!-- 主体部分 -->
    <div class="div2">
        <el-table v-loading="loading" :data="pageGoods.list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="办公用品名称" prop="goodsName" :show-overflow-tooltip="true" />
            <el-table-column label="所属分类" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsSortsNoid|filterSorts(goodsSortsList)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格/型号" prop="goodsType" :show-overflow-tooltip="true" />
            <el-table-column label="库存/总量" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsRemainderNumber}}/{{scope.row.goodsAllTotal}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="btnDetail(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >详情</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="btnWarehousing(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >入库</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageGoods.pageNum"
        :limit.sync="pageGoods.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="listGoods"
        />
        
        <el-dialog :title="title" :visible.sync="open">
            <el-form :model="warehousing" size="mini" label-width="120px">
                <el-row>
                    <el-col :span="10">
                       <el-form-item label="入库时间:">
                           <el-date-picker style="width:190px" v-model="warehousing.createTime"></el-date-picker>
                       </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                <el-col :span="12"> 
                    <el-form-item label="入库物品:">
                        <el-select v-model="warehousing.wGoodsId" @change="getGoodsRemainderNumber">
                            <el-option 
                            v-for="i in pageGoods.list"
                            :key="i.value"
                            :label="i.goodsName"
                            :value="i.goodsId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生成批次:">
                        <el-input v-model="warehousing.wBatch"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                    <el-form-item label="当前库存量:">
                        <el-input v-model="warehousing.wCurrentInventory"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入库数量:">
                        <el-input v-model="warehousing.wNumber"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                    <el-form-item label="单价(元)：">
                        <el-input v-model="warehousing.wPrice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入库人员:">
                        <el-input v-model="user.userName" @click.native="btnGetShowTree()"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input v-model="warehousing.wNodes" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <el-button type="primary" size="mini" @click="btnSaveWarehousing()">确定</el-button>
                <el-button size="mini" @click="remove()">取消</el-button>
            </template>   
        </el-dialog>

        <el-dialog :title="userTitle" :visible.sync="openUser">
            <nav class="treeNav"> 
                <!-- <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
                </el-input> -->
                <el-tree  :data="deptdata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </nav>            
            <template slot="footer">
                <el-button type="primary" size="mini" @click="saveTree()">确定</el-button>
                <el-button size="mini" @click="removeTree()">取消</el-button>
            </template>   
        </el-dialog>

        <el-dialog title="办公用品入库" :visible.sync="inOpen">
            <el-form :model="warehousing" label-width="125px" size="mini" :rules="rules" >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库物品:">
                        <span>{{info.goodsName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属分类:">
                        <span>{{info.goodsSortsNoid|filterSorts(goodsSortsList)}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="生产批次:" prop="collectionUnit">
                        <el-input v-model="warehousing.wBatch"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当前库存量:">
                        <span>{{info.number}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库数量:" prop="collectionUnit">
                        <el-input v-model="warehousing.wNumber" ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"> 
                    <el-form-item label="单价(元):" prop="collectionUnit">
                        <el-input v-model="warehousing.wPrice"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库员:" prop="collectionUnit">
                        <el-input v-model="info.userName" @click.native="btnGetShowTree()"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="入库时间:">
                        <el-date-picker style="width:198px" v-model="warehousing.createTime" ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input v-model="warehousing.wNodes"  type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="btnSaveWarehousing()">保存</el-button>
                <el-button @click="removeWarehousing()">取消</el-button>
            </template>
        </el-dialog>
    </div>

     <!-- 导入 -->
     <div>
        <el-dialog title="办公用品导入" :visible.sync="openUpload">
            <p>请指定用于导入办公用品入库的文件：<a href="http://localhost:8082/upload/办公用品入库模版.xlsx" style="color: blue;">模版下载</a></p>
            <div class="divP">
                <p class="p1">
                    <el-input class="inp1" size="mini"></el-input>
                </p>
                <p class="p2">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :headers="headers"
                        :limit="1"
                        :action="importUrl"
                        :on-success="uploadSuccess"
                        accept=".xlsx,.xls"
                        :show-file-list="false"
                        :auto-upload="false"
                        multiple
                        >
                        <el-button  size="mini">预览</el-button>
                    </el-upload>
                </p>
                <p>
                    <el-button  type="primary" size="mini" @click="submitUpload()">导入</el-button>
                </p>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
import { goodsList , getGoodsRemainderNumbers} from "@/api/administration/goods/goods";
import { getDeptList } from "@/api/system/dept";
import {saveWarehousing} from "@/api/administration/warehousing/warehousing";
import { goodsSortsAllList } from "@/api/administration/goodsSorts/goodsSorts";
import { getToken } from "@/utils/auth";

export default {
    name: 'RuoyiUiIndex',
    data() {
        return {
            rules:{
                collectionUnit:[
                    { required: true,message:"必须填写该选项",trigger:'blur'}
                ], 
            },
            loading:true,
            openUser:false,
            inOpen:false,
            userTitle:'',
            pageGoods:{
                pageNum:1,
                pageSize:8,
            },
            info:{},
            total:0,
            searchInfo:{searchGoodsName:'',},
            goodsSortsList:[],
            title:'',
            goods:{},   
            open:false,
            warehousing:{
                wCurrentInventory:'',
                createTime: ''
            },
            deptdata:[],
            defaultProps: {
                children: 'childList',
                label: 'name',  
            },
            user:{userName:''},
            openUpload:false,
            importUrl: process.env.VUE_APP_BASE_API + "/administration/warehousing/importExcel",
            headers: { Authorization: "Bearer " + getToken() },
        };
    },

    mounted() {
        this.listGoods();
        this.goodsSortsLists();
    },
    methods: {
        // 展示物品管理信息
        listGoods(){
            this.loading = true;
            this.goods.goodsName = this.searchInfo.searchGoodsName;
            this.goods.pageNum = this.pageGoods.pageNum;
            this.goods.pageSize = this.pageGoods.pageSize;
            goodsList(this.goods).then(rel=>{
                this.pageGoods = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
        },
        //点击入库按钮新增
        BthgoodsWarehousing(){
            this.title = '物品入库';
            this.open = true;
            this.warehousing.wBatch = this.dateFormat();
            this.warehousing.createTime = this.getNowTime();
        },
        //取消保存
        remove(){
            this.open = false;
            this.user.userName = "";
            this.warehousing = {};
        },  
        // 获取当前日期
        dateFormat(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? 
                    '0' + (date.getMonth() + 1) : date.getMonth()+ 1;
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            return year +'' +month + '' + day;
        },
        //点击显示选择人员弹框
        btnGetShowTree(){
            this.openUser = true;
            this.userTitle = "选择入库人员";
            this.getTreeDept();
        },
        //获取属性结构
        getTreeDept(){
            getDeptList().then((rel=>{
                if(rel.code == 200){
                    this.deptdata = rel.data;
                }
            }))
        },
        //removeTree 取消选择入库人员
        removeTree(){
            this.openUser = false;
            this.userTitle = "";
        },
        //点击tree 获得所选入库人员信息
        handleNodeClick(data) {
            this.warehousing.wUserId = data.id;
            this.user.userName = data.name;
            this.info.userName = data.name;
        },
        //保存所选入库人员
        saveTree(){
            this.openUser = false;
            this.deptdata = null;
        },
        //获得当前入库物品的当前库存量
        getGoodsRemainderNumber(row){
            this.goods.goodsId = row;
            getGoodsRemainderNumbers(this.goods).then(rel=>{
                if(rel.code == 200){
                    this.goods = rel.data;
                    this.warehousing.wCurrentInventory = this.goods.goodsRemainderNumber;
                }
            })
        },
        //新增入库
        btnSaveWarehousing(){
            saveWarehousing(this.warehousing).then(rel=>{
                if(rel.code == 200){
                    this.open = false;
                    this.warehousing = {};
                    this.$modal.msgSuccess("保存成功");
                }
            })
        },
        //点击详情
        btnDetail(row){
            this.$router.push({
                path:'/warehousing/detail',
                query: {
                    'wGoodsId': row.goodsId
                }
            })
        },
        //所属分类
        goodsSortsLists(){
            goodsSortsAllList().then(rel=>{
                this.goodsSortsList = rel.data;
            })
        },
        //点击入库给规定的物品
        btnWarehousing(row){
            console.log(row);
            this.inOpen = true; 
            this.warehousing.wGoodsId = row.goodsId;
            this.info.goodsName = row.goodsName;
            this.info.goodsSortsNoid = row.goodsSortsNoid;
            this.info.number = row.goodsRemainderNumber;
            this.info.goodsName = row.goodsName;
            this.warehousing.wBatch = this.dateFormat();
            this.warehousing.createTime = this.getNowTime();
        },
        //取消
        removeWarehousing(){
            this.inOpen = false;
        },
        //点击导入
        BtnimportTheFile(){
            this.openUpload = true;
        },
         //导入
         submitUpload(){
            this.$refs.upload.submit();
        },
        //上传成功钩子
        uploadSuccess(response, file, fileList){
            this.openUpload = false;
            this.listGoods();
            this.$message({
                message: response.msg,
                type: 'success'
            })
        },

        //处理默认选中当前日期
	    getNowTime() {
	       var now = new Date();
	       var year = now.getFullYear(); //得到年份
	       var month = now.getMonth(); //得到月份
	       var date = now.getDate(); //得到日期
	       var hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
	       month = month + 1;
	       month = month.toString().padStart(2, "0");
	       date = date.toString().padStart(2, "0");
	       var defaultDate = `${year}-${month}-${date}`;
	       console.log(defaultDate)
	       return defaultDate;
	       this.$set(this.info, "stockDate", defaultDate);
	    },

    },

    filters: {
        filterSorts(val,opt){
            let nodes = '';
            val = val+'' ;
            console.log(val);
            console.log(opt);
            opt.map(obj => {
                if(val === obj.goodsSortsId){   
                    nodes = obj.goodsSortsName;
                }
            })
            return nodes;
        },

    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 10px 10px 32px;   
    }
    .div1 .b2{
        margin: 0px 800px 0px 0px;   
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 20px;
    }
    .inp1{
        width:450px;
    }
    .divP{
        width:600px;
        height:100px;
    }
    .divP p{
        float:left;
        margin-right:10px;
    }
</style>